<template>
  <div v-if="Object.keys(goodsCart).length !== 0" class="add-cart">
    <div class="info-price">
      <span><img src="" alt=""></span>
      <span class="n-price">{{goodsCart.newPrice}}</span>
      <span class="o-price">{{goodsCart.oldPrice}}</span>
      <!-- <span class="discount" >{{goodsCart.discount}}</span> -->
      <div><span class="selected">已选</span>      【店长推荐】{{goodsCart.desc}},  {{goodsCount}}个</div>
    </div>
    <div class="sizes">
      <!-- <div>尺码</div> -->
      <table v-for="(table, index) in goodsCart.sizes"
             class="info-size" :key="index">
        <tr v-for="(tr, indey) in table" :key="indey">
          <!-- {{tr}} -->
          <td v-for="(td, indez) in tr" :key="indez">{{td}}</td>
        </tr>
      </table>
    </div>

    <!-- <div>{{goodsCart.sizes}}</div> -->
  </div>
</template>

<script>
  export default{
    name: "DetailAddCart",
    props: {
      goodsCart: {
        type: Object,
        default(){
          return {}
        }
      }
    },
    data(){
      return {
        goodsCount: 1
      }
    }
  }
</script>

<style>
  .add-cart{
    position: absolute;
    bottom: 50px;
    font-size: 12px;
  }
   .info-price {
     margin-top: 10px;
   }
   .info-price .n-price {
     font-size: 24px;
     color: var(--color-high-text);
   }
   .info-price .o-price {
     font-size: 13px;
     margin-left: 5px;
     text-decoration: line-through;
   }
   .info-price .discount {
     font-size: 12px;
     padding: 2px 5px;
     color: #fff;
     background-color: var(--color-high-text);
     border-radius: 8px;
     margin-left: 5px;
     /*让元素上浮一些: 使用相对定位即可*/
     position: relative;
     top: -8px;
   }
</style>
